<template>
	<div class="head">
		<van-row type="flex" justify="center" style="height: 100%;">
			<van-col span="20">
				<form action="" class="searchlist">
					<span class="iconfont icon-sousuo"></span>
					<input type="text" placeholder="搜索" class="search" v-model="content">
					<span class="iconfont icon-shanchu" @click="clearcontent"></span>
				</form>
			</van-col>
		</van-row>
	</div>
</template>

<script>
export default {
	data () {
		return {
			content: ''
		}
	},
	methods: {
		clearcontent () {
			this.content = '';
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.head {
  @include rect(100%,.46rem);
	background-color: #696f80;
  .searchlist {
    @include rect(100%,.46rem);
    @include flexbox();
    @include justify-content();
    @include align-items();
    .search {
      @include border-radius(3px);
      @include rect(100%,.25rem);
      background-color: #fff;
      border: none;
	  text-indent:.25rem;
    }
	.icon-sousuo {
	  position: relative;
      top: 0;
	  left: .2rem;
	}
	.icon-shanchu {
	  position: relative;
      top: 0;
	  right: .2rem;
	}
  }
}
</style>
